<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="./utils/createDraw.js"></script>
    <script src="./utils/index.js"></script>
    <script src="./utils/setAnimateStyle.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        #btn {
            width: 100px;
            height: 40px;
            position: fixed;
            top: 20px;
            left: 60px;
            z-index: 100;
            background-color: #94CA94;
            border: none;
            border-radius: 10px;
        }

        #clear {
            width: 100px;
            height: 40px;
            position: fixed;
            top: 20px;
            left: 170px;
            z-index: 100;
            background-color: #ff2d51;
            border: none;
            border-radius: 10px;

        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 60px;
            left: -72px;
            z-index: 100;
            min-width: 100px;
            text-align: center;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 50%;
            transform: translateX(-50%);
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
        }

        #popup-content {
            font-size: 14px;
            font-family: "微软雅黑";
        }

        #popup-content .markerInfo {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <button id="btn" onclick="activeDraw()">Point</button>
    <button id="clear" onclick="clearDraw()">清除</button>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content">
            <h2>武汉</h2>
        </div>
    </div>
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 12,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })
        /* 1、激活画笔-获取坐标  图层的style设置marker */
        let source = new ol.source.Vector({

        })
        let layer = new ol.layer.Vector({
            source,
            style: setMarkerStyle('./images/定位.png')
        })
        map.addLayer(layer);
        let draw = createDraw({
            type: "Point",
            source
        })
        let btn = document.getElementById("btn")
        let select = new ol.interaction.Select({
            condition: ol.events.condition.click,
            style: function (feature) {
                // console.log(feature)
                return setMarkerStyle('./images/定位.png')
            },
            layers: [layer]
        })
        /* 监听数据源 */
        let high_layer = new ol.layer.Vector({
            source: new ol.source.Vector({

            }),
            style: setAnimateStyle({ map })
        })
        map.addLayer(high_layer);
        function activeDraw() {
            /* 设置btn样式 */
            btn.disabled = true;
            btn.style.cursor = "no-drop";
            map.addInteraction(draw);
            map.addInteraction(select);
        }
        /* 监听画笔 */
        draw.on("drawend", evt => {
            /* 重置样式 */
            btn.disabled = false;
            btn.style.cursor = "default";
            /* 移除画笔 */
            map.removeInteraction(draw);
        })




        source.on('addfeature', function (event) {
            console.log(event)
            let feature = event.feature;
            high_layer.getSource().clear();
            high_layer.getSource().addFeature(feature);

        });
        /* 事件监听 点击标注,弹窗坐标 */
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer')
        const popup = new ol.Overlay({
            //要转换成overlay的HTML元素
            element: container,
            //当前窗口可见
            autoPan: true,
            //Popup放置的位置
            positioning: 'bottom-center',
            //是否应该停止事件传播到地图窗口
            stopEvent: true,
            autoPanAnimation: {
                //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
                duration: 250,
            },
        })
        map.addOverlay(popup)

        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });
        /* 监听图层 */

        console.log(select)

        select.on("select", e => {
            // console.log();
            let feature = e.selected[0]
            if (feature) {
                let position = feature.getGeometry().getCoordinates().map(item => item.toFixed(2))
                content.innerHTML = position
                console.log(position)
                popup.setPosition(position)
            }

        })
        //添加关闭按钮的单击事件（隐藏popup）
        closer.onclick = function () {
            //未定义popup位置
            popup.setPosition(undefined);
            //失去焦点
            closer.blur();
            return false;
        };
        function clearDraw() {
            source.clear();
            high_layer.getSource().clear();
            popup.setPosition(undefined);
            map.removeInteraction(select);

        }
    </script>
</body>

</html>